import { ReactNode, useEffect } from 'react';

import cn from 'classnames';

import cs from './Parallax.module.scss';

interface ContainerProps {
  children: ReactNode | ReactNode[];
  classNames?: string;
}

export const ParallaxContainer = ({ children, classNames }: ContainerProps) => {
  useEffect(() => {
    const parallax = (e: MouseEvent) => {
      Array.from(document.getElementsByClassName('parallax-item') as HTMLCollectionOf<HTMLElement>).forEach((img) => {
        const speed: number = +(img.getAttribute('data-speed') as string);
        const x = (window.innerWidth - e.pageX * speed + e.x) / 80;
        // const y = (window.innerHeight - e.pageY * speed + e.y) / 500;

        img.style.transform = `translateX(${x}px)`;
      });
    };

    document.addEventListener('mousemove', parallax);
  }, []);
  return <div className={cn(cs.container, classNames)}>{children}</div>;
};
